<template>
  <div class="content">
    <div class="function">
      <el-card class="filter-container" shadow="always">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline">
          <el-form-item label="公司名称：">
            <el-input
             clearable
              @clear="clearMethod2"
              v-model="listQuery.name"
              placeholder="搜索公司名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="面试结果：">
            <el-select
              v-model="listQuery.result"
              placeholder="请选择面试结果"
              clearable
              @clear="clearMethod"
            >
              <el-option label="通过" value="通过"></el-option>
              <el-option label="未通过" value="未通过"></el-option>
              <el-option label="待定" value="待定"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onQuery()"
              >查询</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-circle-plus"
              @click="addInterview()"
              >新增记录</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-table
      :data="list"
      style="width: 100%"
      stripe
      border
      ref="multipleTable"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column prop="name" label="公司名称" width="180" align="center">
      </el-table-column>
      <el-table-column prop="address" label="公司位置" width="200">
      </el-table-column>
      <el-table-column prop="companyType" label="公司类型" align="center">
      </el-table-column>
      <el-table-column prop="postName" label="面试岗位" align="center">
      </el-table-column>
      <el-table-column
        prop="interviewTime"
        label="面试时间"
        align="center"
        :formatter="formatDate"
      >
      </el-table-column>
      <el-table-column prop="postSalary" label="岗位设定薪资" align="center">
      </el-table-column>
      <el-table-column prop="result" label="面试结果" align="center" width="100">
      </el-table-column>
      <el-table-column prop="isFrist" label="是否一面" align="center" width="100">
      </el-table-column>
      <el-table-column prop="isNext" label="是否进入下轮" align="center" width="100">
      </el-table-column>
      <el-table-column prop="isLy" label="是否录用" align="center" width="80">
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button
            type="success"
            icon="el-icon-s-custom"
            circle
            title="查看详情"
            @click.native.prevent="Query2(scope.row)"
          >
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            title="编辑"
            circle
            @click.native.prevent="EditRow(scope.row)"
          >
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            title="删除"
            circle
            @click.native.prevent="DelAction(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row :gutter="20">
      <el-col :span="7">
        <div style="margin-top: 10px">
          <el-button
            type="warning"
            v-if="unselect"
            @click="toggleSelection()"
            icon="el-icon-circle-close"
            >取消选择</el-button
          >
          <el-button
            type="danger"
            v-if="multipleSelectionFlag"
            @click="popDelete()"
            icon="el-icon-delete"
            >Get批量</el-button
          >
          <el-button
            type="danger"
            v-if="multipleSelectionFlag"
            @click="delBatchPost()"
            icon="el-icon-delete"
            >Post批量</el-button
          >
        </div>
      </el-col>
      <el-col :span="3" :offset="13">
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.pageSize"
            :page-sizes="[5, 10, 15]"
            :current-page.sync="listQuery.pageNum"
            :total="total"
          >
          </el-pagination></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import {
  fetchList,
  deleteInterview,
  deleteInterviewBatch,
  deleteInterviewBatchPost
} from "@/api/interview";

export default {
  data() {
    return {
      multipleSelectionFlag: false,
      unselect: false,
      listQuery: {
        keyword: null,
        nameCn: null,
        pageNum: 1,
        pageSize: 5
      },
      delArrParam: {
        ids: null
      },
      total: null,
      list: null,
      rows: null
    };
  },
  created() {
    this.getList();
  },

  methods: {
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 获取选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelectionFlag = true;
      this.unselect = true;
      if (this.multipleSelection.length == 0) {
        // 如不进行判断则勾选完毕后批量删除按钮还是会在
        this.multipleSelectionFlag = false;
        this.unselect = false;
      }
      console.log(this.multipleSelection);
    },

    //get批量删除
    popDelete() {
      this.rows = this.multipleSelection; // multipleSelection存储了勾选到的数据
      let arr = [];
      let ids_str = "";
      this.rows.forEach(function(item) {
        arr.push(item.infoId);
        ids_str += item.infoId + ",";
      });
      ids_str = ids_str.substring(0, ids_str.length - 1);
      console.log(ids_str);
      this.delArrParam.ids = ids_str;
      this.$confirm("是否要删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteInterviewBatch(this.delArrParam).then(response => {
          console.log(response);
          if (response.code == 200) {
            this.getList();
            this.$message({
              message: "删除数据成功",
              type: "warning"
            });
          } else {
            this.$message.error("删除数据失败");
          }
        });
      });
    },
    delBatchPost() {
      console.log(this.rows);
      this.$confirm("此操作不可逆,是否要删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteInterviewBatchPost(this.rows).then(response => {
          console.log(response);
          if (response.code == 200) {
            this.$message({
              message: "删除数据成功",
              type: "warning"
            });
            this.getList();
          } else {
            this.$message.error("删除数据失败");
          }
        });
      });
    },

    //时间格式化
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return (
        dt.getFullYear() +
        "-" +
        (dt.getMonth() + 1) +
        "-" +
        dt.getDate() +
        " " +
        dt.getHours() +
        ":" +
        dt.getMinutes() +
        ":" +
        dt.getSeconds()
      );
    },
    getList() {
      fetchList(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.records;
        this.total = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
        console.log(this.list);
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },

    //条件查询
    onQuery() {
      this.getList();
    },

    addInterview() {
      this.$router.push("/interview/add");
    },

    clearMethod() {
      this.listQuery.result = null;
    },
    clearMethod2() {
      this.listQuery.name = null;
    },

    //修改
    EditRow(row) {
      // alert(row);
      this.$router.push("/interview/add?id=" + row.infoId+"&isEdit=1");
    },
    Query(row){
      this.$router.push("/interview/Query?id=" + row.infoId);
    },
    Query2(row){
      this.$router.push("/interview/add?id=" + row.infoId+"&isEdit=0");
    },

    //删除
    DelAction(row) {
      console.log("==================");
      this.$confirm("是否要删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteInterview(row.infoId).then(response => {
          if (response.code == 200) {
            this.getList();
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1000
            });
          } else {
            this.$message({
              showClose: true,
              message: "警告，这条数据删除失败！",
              type: "warning",
              duration: 1000
            });
          }
        });
      });
    }
  }
};
</script>
<style rel="stylesheet/css" scoped>
.function {
  margin-bottom: 1%;
}
.content{
  margin-left: 1.5%;
  margin-right: 1.5%;
}
</style>
